<!--
* @description  参数1
* @fileName  allfood
* @author userName
* @date 2021-03-29 19:52:50
* @version V1.0.0
!-->

<template>
    <div>
        <div id="allfood" class="allfood">
            <!-- 轮播图 -->
            <div class="block" style="width:78%;position: relative;left:73px;">
                <el-carousel height="460px">
                    <el-carousel-item
                        v-for="item in AdvertisementList"
                        :key="item.fid"
                        style="display: flex;align-items: center;justify-content: center;"
                    >
                        <img style="height:100%; width:100% " :src="item.picture" />

                        <!-- <img style="height:460px;" :src="$targetr + item.big_pic"/> -->
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!-- 轮播图END -->

            <!-- 菜单 -->
            <el-row>
                <el-col :span="4" v-for="(food, index) in foodList" :key="food.fid" :offset="index > 1 ? 1 : 1" style="padding-bottom:30px">
                    <el-card :body-style="{ padding: '10px' }">
                        <el-tooltip popper-class="atooltip" effect="dark" :content="food.des" placement="bottom">
                            <img :src="food.picture" class="image" style="width:220px;height:220px" />
                        </el-tooltip>
                        <!-- <div>{{food.des}}</div> -->
                        <div style="padding: 14px;">
                            <span>{{ food.name }}</span>
                            <div class="bottom clearfix">
                                <time class="time" style="color:rgb(180,70,75);font-size:20px;">{{ food.price }}￥</time>
                                <el-button
                                    v-if="food.undercarriage == 1"
                                    type="text"
                                    class="button"
                                    @click="clientaddfood(food.fid, food.name, food.price)"
                                    >添加</el-button
                                >
                                <el-link type="danger" style="float:right" v-if="food.undercarriage == 0">已售罄</el-link>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 退出登录 -->
        <div>
            <el-button type="text" @click="loginout()" style="position:absolute;right:80px;top:10px">{{ tname }},退出登录</el-button>
            <el-button v-if="lirname" type="text" @click="shift()" style="position:absolute;right:80px;top:40px"
                >点击转入管理页面</el-button
            >
        </div>
        <!-- 订单表 -->
        <div style="position:absolute;right:30px;top:80px">
            <el-table :data="shopcarList" stripe style="width: 100%">
                <el-table-column prop="fname" label="菜名" width="100"> </el-table-column>
                <el-table-column prop="num" label="数量" width="60"></el-table-column>
                <el-table-column width="60">
                    <template slot-scope="scope">
                        <el-button type="primary" circle @click="deletenum(scope.row.fid)">减</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="caddsale()" type="primary">"提交订单"</el-button>
        </div>
    </div>
</template>

<script>
import Addimg from '../../assets/img/add.jpg';
import Updateimg from '../../assets/img/update.jpg';
import { selectfood, addfood, updatefood, clientselectfood } from '../../api/food';
import { findsale } from '../../api/sale';
import { userquit } from '../../api/log';
import { selectsale, addsale, updatesale, deletesale } from '../../api/sale';
import { allSlideShow } from '../../api/slideshow';
export default {
    props: {
        // 父辈向子辈传参
    },
    name: 'allfood',
    data() {
        return {
            currentDate: new Date(),
            message: 'aaaadd',
            addimg: Addimg,
            foodimg: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            foodList: [],
            shopcarList: [],
            lirname: false,
            umess: [],
            uid: '',
            tname: '',
            AdvertisementList: []
        };
    },
    created() {
        // 实例被创建之后执行代码
        this.begin();
        this.clientUpdateSale();
    },
    computed: {
        // 计算属性
    },
    components: {
        // 组件的引用
    },
    methods: {
        // 方法
        clientUpdateSale() {
            var clientUpdateSale = localStorage.getItem('clientUpdateSale');
            var datetime = localStorage.getItem('datetime');
            var that = this;
            if (clientUpdateSale == 'true') {
                var ddd = JSON.stringify({
                    // 参数
                    datetime
                });
                findsale(ddd)
                    .then(res => {
                        if (res.code == 200) {
                            console.log(res.data);
                            for (var i = 0; i < res.data.length; i++) {
                                var ffid = res.data[i].fid;
                                var ffname = res.data[i].fname;
                                var ffprice = res.data[i].fprice;
                                var ffnum = res.data[i].num;
                                var fuid = res.data[i].uid;
                                var fdata = {
                                    fid: ffid,
                                    fname: ffname,
                                    fprice: ffprice,
                                    num: ffnum,
                                    uid: fuid
                                };
                                this.shopcarList.push(fdata);
                            }
                            var ddd = JSON.stringify({
                                // 参数
                                datetime,
                                status: 0
                            });
                            updatesale(ddd)
                                .then(res => {
                                    console.log(res);
                                })
                                .catch();
                        }
                        // console.log();
                        localStorage.setItem('clientUpdateSale', false);
                    })
                    .catch(res => {
                        this.$message.error('出错了哦');
                    });
            }
        },
        begin() {
            // console.log('selectfood');
            var loginrname = localStorage.getItem('loginrname');
            var uid = localStorage.getItem('uid');
            var tname = localStorage.getItem('tname');
            this.uid = uid;
            this.tname = tname;
            var that = this;
            if (loginrname == 'admin') {
                that.lirname = true;
            }
            selectfood()
                .then(res => {
                    // console.log(res);
                    this.foodList = res.data;
                    // console.log(this.foodList);
                })
                .catch(res => {});
            this.selectAdvertisement();
        },
        selectAdvertisement() {
            allSlideShow()
                .then(res => {
                    // console.log(res);
                    // console.log('aaaaaaaaa');
                    this.AdvertisementList = res.data.slideshowlist;
                    // console.log('aaaaaaaaa');
                    // console.log(this.AdvertisementList);
                })
                .catch(res => {
                    this.$message.error('出错了哦');
                });
        },
        shift() {
            this.$router.push('/dashboard');
        },
        loginout() {
            userquit()
                .then(res => {
                    // console.log(res);
                    if (res == 1) {
                        this.$router.push('/login');
                    }
                })
                .catch(res => {
                    this.$message.error('出错了哦');
                });
        },
        deletenum(fid) {
            // console.log('11');
            var shoplength = this.shopcarList.length;
            for (var i = 0; i < shoplength; i++) {
                if (this.shopcarList[i].fid == fid) {
                    if (this.shopcarList[i].num == 1) {
                        this.shopcarList[i].num -= 1;
                        this.shopcarList.splice(i, 1);
                    } else {
                        this.shopcarList[i].num -= 1;
                        // console.log(this.shopcarList);
                    }
                    return;
                }
            }
        },
        clientaddfood(fid, fname, fprice) {
            // console.log(fid);
            // console.log(fname);
            // console.log(fprice);
            var fdata = {
                fid,
                fname,
                fprice,
                num: 1,
                uid: this.uid
            };
            var shoplength = this.shopcarList.length;
            if (shoplength == 0) {
                this.shopcarList.push(fdata);
                // console.log(this.shopcarList);
                return;
            }
            for (var i = 0; i < shoplength; i++) {
                if (this.shopcarList[i].fid == fid) {
                    this.shopcarList[i].num += 1;
                    // console.log(this.shopcarList);
                    return;
                }
            }
            this.shopcarList.push(fdata);
            // console.log(this.shopcarList);
        },

        caddsale() {
            // console.log(123456789);
            // var shopcarList = this.shopcarList;
            // var ddd = JSON.stringify({
            //     // 参数
            //     shopcarList
            // });
            // console.log(this.shopcarList);
            var that = this;
            addsale(this.shopcarList)
                .then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        this.$message.success('提交成功');
                        // console.log(res);
                        localStorage.setItem('datetime', res.data);

                        // 转到这个订单页
                        this.$router.push('/clientSale');
                    } else {
                        this.$message.error('出错了哦');
                    }
                })
                .catch(res => {
                    this.$message.error('出错了哦');
                });
        }
    },
    mounted() {
        // 页面进入时加载内容
    },
    watch: {
        // 监测变化
    }
};
</script>
<style>
/* .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: pink;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: pink;
} */
.atooltip {
    /* 背景 */
    background: rgb(126, 125, 125) !important;
    /* 字体颜色 */
    color: #fff !important;
    width: 300px !important;
    font-size: 15px !important;
    line-height: 20px !important;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
</style>
